<template>
  <Modal :mask-closable="false" title="请分配" class="modal-content-layout" v-model="memberVisible" :width="1200"><!--请分配维修员-->
    <Row :gutter="16">
      <Col :span="12">
      <Input v-model="key" :placeholder="`${$t('common.inputInfo')}姓名/工号`" :clearable="true" />
      </Col>
      <Col :span="6">
      <Button type="primary" @click="onSearch">{{ $t('common.Query') }}</Button>
      </Col>
    </Row>
    <Row :gutter="16" v-if="!showStates">
      <Col :span="4" class="margin10" v-for="item in memberList" :key="item.id">
      <div class="member" @click="handleMemberMul(item)">
        <img v-if="item.checked" src="~images/workorder/checked.png" class="icon-position" />
        <img v-if="!item.checked" src="~images/workorder/unchecked.jpg" class="icon-position" />
        <div class="member-item">
          <!--工号-->
          <span>{{ $t('fault.JobNumber') }}:</span><span>{{ item.empno }}</span>
        </div>
        <div class="member-item">
          <!--姓名-->
          <span>{{ $t('common.Name') }}:</span><span>{{ item.realname }}</span>
        </div>
      </div>
      </Col>
      <Col span="24" class="mt16">
      <Form ref="form" :model="form" label-position="top" v-if="showResult">
        <FormItem label="转单原因" prop="fromReason" :rules="{ required: true, message: '请输入', trigger: 'blur' }">
          <Input type="textarea" v-model="form.fromReason" :placeholder="`${$t('common.inputInfo')}转单原因`" clearable />
        </FormItem>
      </Form>
      </Col>
    </Row>
    <Row v-if="showStates">
      <!--暂无数据-->
      <div style="width: 70px; height: 80px; line-height: 80px; margin: 0px auto">
        {{ $t('暂无数据') }}
      </div>
    </Row>
    <div slot="footer">
      <Button type="default" @click="handleCancel">{{ $t('common.Cancle') }}</Button>
      <Button type="primary" :loading="loadingVisible" @click="handleOk">{{ $t('maintenance.Confirmed') }}</Button>
    </div>
  </Modal>
</template>

<script>
export default {
  name: "signleMemberModal",
  data() {
    return {
      id: "",
      key: "",
      status: "",
      memberVisible: false,
      loadingVisible: false,
      memberList: [],
      showStates: false,
      showResult: false,
      form: {},
    };
  },
  methods: {
    show(order, status) {
      this.key = "";
      this.showResult = status;
      this.memberVisible = true;
      this.id = order.id;
      // this.status = order.workOrderStatus;
      this.onSearch();
    },
    onSearch() {
      let params = {
        empno: this.key,
      };
      this.axios({
        method: "post",
        url: "/dms/workOrder/getUsers",
        data: params,
      }).then((res) => {
        if (res.code === 200) {
          if (!res.data.length) {
            // this.$Message.warning(({content:'请输入正确的工号或姓名!',duration:6,closable:true}))
            // return false
            this.showStates = true;
          } else {
            this.showStates = false;
          }
          this.memberList = res.data.map((item) => {
            return {
              ...item,
              checked: false,
            };
          });
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    handleMemberMul(item) {
      this.memberList.forEach((list) => {
        if (list.id === item.id) {
          list.checked = true;
        } else {
          list.checked = false;
        }
      });
    },
    handleCancel() {
      this.memberVisible = false;
      this.memberList = [];
    },
    handleOk() {
      if (this.showResult) {
        if (!!!this.form.fromReason) {
          this.$Message.warning({
            content: "请输入报废原因！",
            duration: 6,
            closable: true,
          });
          return
        }
      }
      let userIds, userName;
      this.memberList.map((item) => {
        if (item.checked) {
          console.log(item);
          userIds = item.id;
          userName = item.realname;
        }
      });
      if (!userIds) {
        this.$Message.warning({
          content: "请选择分配人员！",
          duration: 6,
          closable: true,
        });
        return false;
      }

      // if (this.deviceMId) {
      //   params['deviceMId'] = this.deviceMId;
      // }
      console.log(userIds, userName);
      let params = {
        id: this.id,
        operateId: userIds,
        operateName: userName,
        fromReason: this.form.fromReason || null,
      };
      this.loadingVisible = true;
      this.axios({
        method: 'post',
        url: this.showResult ? '/dms/moldMaintenanceHall/transfer' : '/dms/servicingTask/distribute',
        data: params
      }).then(res => {
        if (res.code === 200) {
          this.$emit('handleRefresh')
          this.$Message.success(({ content: '分配成功！', duration: 6, closable: true }))
        } else {
          this.$Message.warning(({ content: res.msg, duration: 6, closable: true }))
        }
      }).finally(() => {
        this.memberVisible = false
        this.loadingVisible = false
        this.memberList = []
      })
    },
  },
};
</script>

<style scoped lang="scss">
.member {
  width: 100%;
  height: 100px;
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(221, 221, 221, 1);
  border-radius: 3px;
  box-shadow: 3px 2px 5px rgba(0, 0, 0, 0.1);
  position: relative;

  .icon-position {
    position: absolute;
    right: 0;
    top: 0;
    width: 24px;
    height: 24px;
  }

  .member-item {
    line-height: 30px;
    font-size: 14px;
    margin-top: 16px;

    span {
      &:nth-child(1) {
        display: inline-block;
        width: 40%;
        text-align: right;
        color: #999;
      }

      &:nth-child(2) {
        display: inline-block;
        width: 60%;
        text-align: center;
        font-family: "Helvetica", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
        color: #333;
        /*color: #000*/
      }
    }
  }
}

::v-deep.bgBlue {
  background-color: #e6f7ff;
  color: #1890ff;
}

.margin10 {
  margin-top: 10px;
}
</style>
